<template>
    <div>
        <Detailheader
        :sightName="sightName"
        :bannerImg="bannerImg"
        :gallaryImgs="gallaryImgs"
        ></Detailheader>
        <ditailheader></ditailheader>
        <div class="conter"> <ditaillist :list="list"></ditaillist></div>
    </div>
</template>
<script>
import axios from 'axios'
import Detailheader from './compoeners/banner'
import  ditailheader from './compoeners/header'
import  ditaillist from './compoeners/list'
export default {
  name:'detail' ,
  components:{
     Detailheader ,
     Detailheader ,
     ditailheader,
     ditaillist
  } ,
  data(){
    return{
       sightName:'',
       bannerImg:'',
       gallaryImgs:[],
      list:[]
    }
  },
  methods:{
  getdetaiinfo() {
    axios.get('/api/detail.json',{
      params : {
        id: this.$route.params.id
      }
    }).then(this.handlegetdatasucc)
  },
  handlegetdatasucc (res){
     res=res.data
   if(res.ret && res.data){
     const data=res.data
     this.sightName=data.sightName
     this.bannerImg=data.bannerImg
     this.gallaryImgs=data.gallaryImgs
     this.list=data.categoryList
   }
 
  }
  
  },
  mounted() {
   this.getdetaiinfo() 
  }
}
</script>
<style lang="stylus" scoped>
.conter
  height :50rem
</style>

